<!--  -->
<template>
  <div :class="['w-100', isOn?'on':'']" @mouseover="change" @mouseout="change" v-if="type == '1'">
    <img :src="source" alt="">
    <div class="txt">
      <h5>{{title}}</h5>
      <p>{{text}}</p>
    </div>
  </div>
  <div :class="['w-100 type-2', isOn?'on':'']" @mouseover="change" @mouseout="change" v-else-if="type == '2'">
    <img :src="source" alt="" v-if="!isOn">
    <img :src="source1" alt="" v-else>
    <div class="txt">
      <h5>{{title}}</h5>
      <p>{{text}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isOn: false
    }
  },

  props: {
    title: {
      type: String
    },
    text: {
      type: String
    },
    source: {
      type: String
    },
    source1: {
      type: String
    },
    type: {
      type: String,
      default: '1'
    }
  },

  computed: {},

  methods: {
    change: function () {
      this.isOn = !this.isOn
    }
  }
}

</script>
<style lang='less' scoped>
  @height: 45px;
  img {
      width: 100%;
  }
  .txt {
      height: @height;
      position: absolute;
      left: @base-edge;
      right: @base-edge;
      bottom: 0px;
      color: rgb(255, 255, 255);
      font-family: 微软雅黑;
      background: rgba(0, 0, 0, 0.6);
      h5 {
          height: @height;
          line-height: @height;
          transition:@default-trans;
          padding-top: 0;
          margin-bottom: 0;
      }
      transition:@default-trans;
  }
  .on {
    .txt {
      height: 100%;
      padding-top: 20%;
    }
  }
  .type-2 {
    height: 7* @1rem;
    .bd(#e6e3e3);
    img {
      width: 50%;
      margin-top: 1rem;
    }
    .txt {
      height: 0;
      background: #15bdf9;
      h5 {
        .ft(15);
      }
    }

    &.on {
      .bd(#15bdf9);
      .txt{
        height: @height;
        padding: 0;
      }
    }
  }
</style>
